import FeatureCard from "@/components/FeatureCard";
import Tag from "@/components/Tag";
import avatar1 from '@/assets/images/avatar-ashwin-santiago.jpg';
import avatar2 from '@/assets/images/avatar-lula-meyers.jpg';
import avatar3 from '@/assets/images/avatar-florence-shaw.jpg';
import Image from "next/image";
import Avatar from "@/components/Avatar";
import Key from "@/components/Key";

const features = [
    "Asset Library",
    "Code Preview",
    "Flow Mode",
    "Smart Sync",
    "Auto Layout",
    "Fast Search",
    "Smart Guides",
];

export default function Features() {
    return (
        <section className="py-24">
            <div className="container">
                <div className="flex justify-center">
                    <Tag>Features</Tag>
                </div>
                <h2 className="mt-6 mx-auto max-w-2xl text-6xl font-medium text-center">Where power meets
                    {' '}
                    <span className="text-lime-400">simplicity</span>
                </h2>
                <div className="mt-12 grid grid-cols-1 md:grid-cols-4 lg:grid-cols-3 gap-8">
                    <FeatureCard className="md:col-span-2 lg:col-span-1" title="Realtime Collaboration" description="Work together seamlessly with conflict-free team editing">
                        <div className="aspect-video flex items-center justify-center">
                            <Avatar className="z-50"><Image src={avatar1} alt='Avatar1' className="rounded-full" /></Avatar>
                            <Avatar className="z-40 -ml-6 border-indigo-500"><Image src={avatar2} alt='Avatar2' className="rounded-full" /></Avatar>
                            <Avatar className="z-30 -ml-6 border-amber-500"><Image src={avatar3} alt='Avatar3' className="rounded-full" /></Avatar>
                            <Avatar className="-ml-6 border-transparent">
                                <div className="size-full inline-flex items-center justify-center gap-1 bg-neutral-700 rounded-full">
                                    {Array.from({ length: 3 }).map((_, index) => (
                                        <span className="size-1.5 bg-white rounded-full" key={index}></span>
                                    ))}
                                </div>
                            </Avatar>
                        </div>
                    </FeatureCard>
                    <FeatureCard className="md:col-span-2 lg:col-span-1" title="Interactive Prototyping" description="Engaging your clients with prototypes that react to user actions">
                        <div className="aspect-video flex items-center justify-center">
                            <p className="text-center text-4xl font-extrabold text-white/20">
                                We&apos;ve achieved
                                {' '}
                                <span className="text-transparent bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text">incredible</span>
                                {' '}
                                growth this year
                            </p>
                        </div>
                    </FeatureCard>
                    <FeatureCard className="md:col-span-2 md:col-start-2 lg:col-span-1 lg:col-start-auto" title="Keyboard Quick Actions" description="Powerful commands to help you create designs quickly">
                        <div className="aspect-video flex items-center justify-center gap-4">
                            <Key className="w-28">shift</Key>
                            <Key>alt</Key>
                            <Key>C</Key>
                        </div>
                    </FeatureCard>
                </div>
                <div className="mt-8 flex flex-wrap gap-3 justify-center">
                    {features.map(feature => (
                        <div key={feature} className="px-3 py-1.5 md:px-5 md:py-2 inline-flex items-center gap-3 bg-neutral-900 border border-white/10 rounded-2xl">
                            <span className="size-5 inline-flex justify-center items-center bg-lime-400 text-xl text-neutral-950 rounded-full">&#10038;</span>
                            <span className="font-medium md:text-lg">{feature}</span>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}
